<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" width="45%" top="20vh">
      <el-form :model="createForm" label-width="160px" label-suffix=":" :rules="rules" ref="createForm">
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="费用项名称" prop="coaName">
              <el-input v-model.trim="createForm.coaName" placeholder="请输入费用项名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="费用单价" prop="coaPrice">
              <el-input type="number" v-model.trim="createForm.coaPrice" placeholder="请输入费用单价"
                @change="onPriceChange"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="数量" prop="coaNumber">
              <el-input type="number" v-model.trim="createForm.coaNumber" placeholder="请输入数量"
                @change="onNumberChange"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="计价单位" prop="pricingUnit">
              <el-input v-model.trim="createForm.pricingUnit" placeholder="请输入计价单位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="财务周期" prop="financialCycle">
              <el-select v-model="createForm.financialCycle" placeholder="请选择财务周期" style="width: 100%;">
                <el-option label="月" value="1" />
                <el-option label="季" value="2" />
                <el-option label="年" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="合计金额" prop="totalPrice">
              <el-input v-model.trim="createForm.totalPrice" type="number" placeholder="请输入合计金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeNetWorker()">关 闭</el-button>
        <el-button type="primary" @click="confirmData('createForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addFinanceRecord,
  updateFinanceRecord
} from '@/api/business'
export default {
  name: "ExpendDialog",
  data () {
    return {
      title: "",
      visible: false,
      createForm: {},
      rules: {
        coaName: [
          { required: true, message: "请输入费用项名称", trigger: "blur" },
        ],
        coaNumber: [
          { required: true, message: "请输入数量", trigger: "blur" },
          { pattern: /^[0-9]*$/, "message": "只能输入正整数" }
        ],
        coaPrice: [
          { required: true, message: "请输入费用单价", trigger: "blur" },
          {
            required: true,
            pattern:
              /^(([1-9]\d*|[0]{1,1})|([0][.]{1}[0-9]{0,2}[1-9]+)|([1-9]\d*[.]{1}[0-9]+))$/,
            message: "请输入大于0的数",
          },
        ],
        pricingUnit: [
          { required: true, message: "请输入计价单位", trigger: "blur" },
        ],
        financialCycle: [
          { required: true, message: "请选择财务周期", trigger: "blur" },
        ],
      },
    }
  },
  created () { },
  mounted () { },
  methods: {
    add () {
      this.title = "新增";
      this.createForm = {};
      this.visible = true;
    },
    edit (val) {
      this.title = "编辑";
      this.createForm = Object.assign({}, val);
      this.visible = true;
    },
    onPriceChange (val) {
      if (this.createForm.coaNumber) {
        this.createForm.totalPrice = Number(this.createForm.coaNumber) * Number(val);
      }
    },
    onNumberChange (val) {
      if (this.createForm.coaPrice) {
        this.createForm.totalPrice = Number(this.createForm.coaPrice) * Number(val);
      }
    },
    confirmData (formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          if (this.createForm.id) {
            updateFinanceRecord(this.createForm).then((res) => {
              const data = res.data
              if (data.code == 0) {
                this.$message.success('修改成功');
                this.$emit('ok');
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || '修改失败')
              }
            })
          } else {
            addFinanceRecord(this.createForm).then((res) => {
              const data = res.data
              if (data.code == 0) {
                this.$message.success('新增成功');
                this.$emit('ok');
                this.closeNetWorker();
              } else {
                this.$message.error(data.data || '新增失败')
              }
            })
          }
        }
      });
    },
    closeNetWorker () {
      this.createForm = {};
      this.visible = false;
    }
  }
};
</script>
<style scoped lang="less"></style>
